<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯页面临摹</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/section.css">
    <script src="js/updown.js"></script>
    <script src="js/animate.js"></script>
    <script src="js/lunbo.js"></script>
</head>

<body>
    <!-- nav导航模块开始 -->
    <div class="back">
        <!-- 轮播图部分 -->
        <div class="back_img">
            <ul>
                <li><img src="images/banner/banner-wwl-2.jpg" alt=""></li>
                <li><img src="images/banner/home-bg-carbon.jpg" alt=""></li>
                <li><img src="images/banner/brief-1-1.jpg" alt=""></li>
                <li><img src="images/banner/banner-game.jpg" alt=""></li>
            </ul>
        </div>
        <nav class="h-nav">
            <!-- 下拉白板模块 -->
            <div class="whiteboard">
            </div>
            <div class="nav">
                <!-- 快捷导航栏部分 -->
                <div class="shortcut">
                    <ul class="menu">
                        <li>
                            <a href="javascript:;" class="menu_list">简介</a>
                            <!-- 下拉栏  -->
                            <ul class="show_list">
                                <li><a href="javascript:;">公司简介</a></li>
                                <li><a href="javascript:;">愿景与使命</a></li>
                                <li><a href="javascript:;">发展历程</a></li>
                                <li><a href="javascript:;">业务框架</a></li>
                                <li><a href="javascript:;">管理团队</a></li>
                                <li><a href="javascript:;">企业文化</a></li>
                                <li><a href="javascript:;">办公地点</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" class="menu_list">业务</a>
                            <!-- 下拉栏 -->
                            <ul class="show_list">
                                <li><a href="javascript:;">面向用户</a></li>
                                <li><a href="javascript:;">面向企业</a></li>
                                <li><a href="javascript:;">创新科技</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" class="menu_list">员工</a>
                            <ul class="show_list">
                                <li><a href="javascript:;">人才发展</a></li>
                                <li><a href="javascript:;">腾讯学堂</a></li>
                                <li><a href="javascript:;">工作环境</a></li>
                                <li><a href="javascript:;">员工活动</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" class="menu_list">ESG</a>
                            <ul class="show_list">
                                <li><a href="javascript:;">环境</a></li>
                                <li><a href="javascript:;">社会</a></li>
                                <li><a href="javascript:;">治理</a></li>
                                <li><a href="javascript:;">ESG评级</a></li>
                                <li><a href="javascript:;">报告</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" class="menu_list">投资者</a>
                            <ul class="show_list">
                                <li><a href="javascript:;">季度业绩及投资者新闻</a></li>
                                <li><a href="javascript:;">公告及财务报告</a></li>
                                <li><a href="javascript:;">业绩电话会及投资者日历</a></li>
                                <li><a href="javascript:;">投资者工具包</a></li>
                                <li><a href="javascript:;">证券及债券信息</a></li>
                                <li><a href="javascript:;">环境、社会及管治</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" class="menu_list">媒体</a>
                            <ul class="show_list">
                                <li><a href="javascript:;">企业动态</a></li>
                                <li><a href="javascript:;">财务新闻</a></li>
                                <li><a href="javascript:;">腾讯视角</a></li>
                                <li><a href="javascript:;">媒体资料库</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- logo部分 -->
                <div class="logo">
                    <a href="javascript:;"></a>
                </div>
                <!-- 语言切换模块 -->
                <div class="language-area">
                    <a href="javascript:;" class="langu-ch">简</a>
                    <i class="divide">|</i>
                    <a href="javascript:;" class="langu-hk">繁</a>
                    <i class="divide">|</i>
                    <a href="javascript:;" class="langu-en">EN</a>
                </div>
            </div>
        </nav>
        <!-- nav导航模块结束 -->
        <!-- banner模块开始 -->
        <div class="banner_title">
            <h1 class="w">腾讯碳中和目标及行动路线报告</h1>
            <h5 class="w">点击了解腾讯可持续发展和碳中和目标细节。</h5>
        </div>
        <div class="banner_icon w">
            <div class="arrowhead">
                <span class="arrowhead_left"></span>
                <span class="arrowhead_right"></span>
            </div>
            <div class="banner_dots">

            </div>
        </div>
    </div>
    <!-- banner模块结束 -->

    <!-- 最新动态模块开始 -->
    <section class="news_update">
        <div class="content w">
            <h4>最新动态</h4>
        </div>
        <div class="module_first w">
            <!-- 第一列 -->
            <div class="firstline">
                <div class="firstline_one">
                    <div class="firstline_one_img">
                        <a href="javascript:;">
                            <img src="images/index/update11.png!article.cover" alt="">
                        </a>
                    </div>
                    <div class="firstline_one_card">
                        <span class="date_label">2022.03.22</span>
                        <a href="javascript:;">
                            <h3>打造智慧城市，推动游戏向善</h3>
                            <p>技术能够改善人类的生活。</p>
                        </a>
                    </div>
                </div>
                <div class="firstline_two">
                    <div class="two_left">
                        <div class="two_left_img">
                            <a href="javascript:;">
                                <img src="images/index/update12(1).jpg!article.cover" alt="">
                            </a>
                        </div>
                        <div class="two_left_card">
                            <span class="date_label">2022.03.23</span>
                            <a href="javascript:;">
                                <h3>腾讯数据分析助理制作人刘义琼：积极拥抱新知识、新想法</h3>
                                <p>刘义琼与读者分享了自己的职场故事、个人发展，以及她对性别平等议题的看法。</p>
                            </a>
                        </div>
                    </div>
                    <div class="two_right">
                        <div class="two_right_img">
                            <a href="javascript:;">
                                <img src="images/index/update12(2).png!article.cover" alt="">
                            </a>
                        </div>
                        <div class="two_right_card">
                            <span class="date_label">2022.03.17</span>
                            <a href="javascript:;">
                                <h3>腾讯K6社区平台中心总监蔡俊：突破极限，超越自我</h3>
                                <p>本期我们邀请到腾讯K6社区平台中心总监蔡俊与大家分享她的职场故事。</p>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="firstline_three">
                    <div class="firstline_three_img">
                        <a href="javascript:;">
                            <img src="images/index/update13.jpg!article.cover" alt="">
                        </a>
                    </div>
                    <div class="firstline_three_card">
                        <span class="date_label">2020.11.19</span>
                        <a href="javascript:;">
                            <h3>AI技术如何帮助听障群体“听更清”？</h3>
                            <p>腾讯天籁AI音频技术通过AI降噪算法改善听障人群听觉体验，让他们真正听清世界。</p>
                        </a>
                    </div>
                </div>
                <div class="firstline_four">
                    <div class="firstline_four_img">
                        <img src="images/index/update14.png" alt="">
                        <div class="ff_img_shadow"></div>
                    </div>
                    <div class="firstline_four_card">
                        <a href="javascript:;">
                            <h3>全球战疫 一起行动</h3>
                            <p>腾讯发挥科技优势，为远程办公、学习和娱乐提供工具和服务，减缓新冠疫情传播。</p>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 第二列 -->
            <div class="secondline">
                <div class="secondline_one">
                    <div class="secondline_one_img">
                        <a href="javascript:;">
                            <img src="images/index/update21.jpg!article.cover" alt="">
                        </a>
                    </div>
                    <div class="secondline_one_card">
                        <span class="date_label">2022.02.24</span>
                        <a href="javascript:;">
                            <h3>腾讯宣布2030年实现碳中和</h3>
                            <p>腾讯承诺不晚于2030年实现自身运营及供应链的全面碳中和，公司计划不晚于2030年实现100%绿色电力。</p>
                        </a>
                    </div>
                </div>
                <div class="secondline_two">
                    <div class="secondline_two_img">
                        <a href="javascript:;">
                            <img src="images/index/update22.jpg!article.cover" alt="">
                        </a>
                    </div>
                    <div class="secondline_two_card">
                        <span class="date_label">2022.03.10</span>
                        <a href="javascript:;">
                            <h3>诺贝尔奖得主让·梯若尔教授与腾讯对话︰气候变化与建设碳中和的未来</h3>
                            <p>碳中和的未来取决于良好政策、绿色技术和多方合作。</p>
                        </a>
                    </div>
                </div>
                <div class="secondline_three">
                    <div class="secondline_three_img">
                        <a href="javascript:;">
                            <img src="images/index/update23.jpg!article.cover" alt="">
                        </a>
                    </div>
                    <div class="secondline_three_card">
                        <span class="date_label">2021.08.20</span>
                        <a href="javascript:;">
                            <h3 style="font-size: 23px;">“能源互联网”可助全球能源加速转型</h3>
                            <p>网大为（David
                                Wallerstein）作为腾讯首席探索官，近期受邀出席“国际能源变革对话”，并就如何发挥包括云、软件、数据、人工智能和机器学习等互联网先进科技在能源转型中的重要作用，分享了前瞻性的观点。
                            </p>
                        </a>
                    </div>
                </div>
                <div class="secondline_four">
                    <a href="javascript:;" class="four_words">
                        <img src="images/index/update24.png" alt="">
                        <h3>用户为本，科技向善</h3>
                    </a>
                    <a href="javascript:;" class="four_vedio"></a>
                    <video src="https://static.www.tencent.com/uploads/2021/09/17/2a59c30bc897b54b072eb3d96c2af4e5.mp4"
                        controls autoplay muted>
                    </video>
                </div>
            </div>
        </div>
    </section>
    <!-- 最新动态模块结束 -->

    <!-- section1开始 -->
    <section>
        <div class="sec1">
            <div class="introduction w">
                <a href="javascript:;" class="intro1">
                    <div class="introduction1">
                        <img src="images/index/introduction1_1.jpg" alt="">
                        <h2>公司简介</h2>
                    </div>
                </a>
                <a href="javascript:;" class="intro2">
                    <div class="introduction2">
                        <img src="images/index/introduction2.jpg" alt="">
                        <h2>企业文化</h2>
                    </div>
                </a>
                <a href="javascript:;" class="intro3">
                    <div class="introduction3">
                        <img src="images/index/introduction3.jpg" alt="">
                        <h2>办公地点</h2>
                    </div>
                </a>
            </div>
        </div>
    </section>
    <!-- section1结束 -->

    <!-- section2开始 -->
    <section>
        <div class="sec2">
            <div class="hotword w">
                <div class="hotword_title">
                    <a href="javascript:;" class="touch">
                        <h2>连接用户与生活</h2>
                        <p>让生活更便捷更多彩</p>
                    </a>
                    <a href="javascript:;">
                        <h2>连接企业与科技</h2>
                        <p>数字化助手，助力产业升级</p>
                    </a>
                    <a href="javascript:;">
                        <h2>连接现在与未来</h2>
                        <p>探索面向未来的创新科技</p>
                    </a>
                </div>
                <div class="hotword_pic">
                    <div class="hotword_picture">
                        <img src="images/index/section21.jpg" alt="">
                        <div class="pic_bottom">
                            <a href="javascript:;">
                                <h3>通信与社交</h3>
                                <p>连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。</p>
                            </a>
                        </div>
                    </div>
                    <div class="hotword_picture">
                        <img src="images/index/section22.jpg" alt="">
                        <div class="pic_bottom">
                            <a href="javascript:;">
                                <h3>数字内容</h3>
                                <p>基于优质内容，以技术为驱动引擎，探索社交和内容融合的下一代形态。</p>
                            </a>
                        </div>
                    </div>
                    <div class="hotword_picture">
                        <img src="images/index/section23.jpg" alt="">
                        <div class="pic_bottom">
                            <a href="javascript:;">
                                <h3>金融科技服务</h3>
                                <p>连接用户、商户和金融机构，提供安全、专业、便捷的金融产品与服务。</p>
                            </a>
                        </div>
                    </div>
                    <div class="hotword_picture">
                        <img src="images/index/section24.jpg" alt="">
                        <div class="pic_bottom">
                            <a href="javascript:;">
                                <h3>工具</h3>
                                <p>提供多种工具性软件，帮助用户快速直接解决各项具体需求。</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- section2结束 -->

    <!-- section3开始 -->
    <section>
        <div class="sec3">
            <div class="connect w">
                <div class="connect_pic">
                    <img src="images/index/section31.jpg" alt="">
                    <div class="connect_center">
                        <h3>腾讯为村</h3>
                        <p>根据乡村使用场景定制微信公众号，形成由村、乡镇、区县、州市组成的公众号集群服务村民，打造手机上的“为村服务中心”。</p>
                    </div>
                    <span class="connect_bottom">
                        <a href="javascript:;" class="connect_left"></a>
                        <a href="javascript:;" class="connect_right"></a>
                    </span>
                </div>
                <div class="connect_txt">
                    <a href="javascript:;">
                        <h2>
                            连接<br>
                            责任与信任
                        </h2>
                        <h5>
                            聚合微小善行，以科技让世界更美好
                        </h5>
                        <span></span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- section3结束 -->

    <!-- section4开始 -->
    <section>
        <div class="sec4">
            <div class="subbanner_img">
                <img src="images/index/index_section4_bg3.jpg" alt="">
            </div>
            <div class="subbanner_txt">
                <div class="subbanner_txt_main">
                    <a href="javascript:;">
                        <h2>
                            连接
                            <br>
                            人才与发展
                        </h2>
                        <h5>
                            激发活力，助力成长
                        </h5>
                        <span></span>
                    </a>
                </div>
            </div>
            <div class="subbanner_icon">
                <div class="subbanner_icon_main">
                    <div class="arrowhead">
                        <span class="arrowhead_left"></span>
                        <span class="arrowhead_right"></span>
                    </div>
                    <div class="dots">
                        <span class="cur_dots"></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
    </section>
    <!-- section4结束 -->

    <!-- 页脚部分开始 -->
    <footer>
        <div class="footer_part">
            <div class="footer_con w">
                <div class="focus">
                    <h3 class="h_title">关注我们</h3>
                    <ul>
                        <li>
                            <a href="javascript:;" class="wechat">
                                <i class="wechat_icon"></i>
                                <img class="wechat_pic" src="images/index/footer-wechat-code.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="weibo">
                                <i class="weibo_icon"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="twitter">
                                <i class="twitter_icon"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="in">
                                <i class="in_icon"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="mod_help">
                    <dl class="join">
                        <h3 class="h_title">加入我们</h3>
                        <dd>
                            <a href="javascript:;">社会招聘</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">校园招聘</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">国际招聘</a>
                        </dd>
                    </dl>
                    <dl class="contact">
                        <h3 class="h_title">联系我们</h3>
                        <dd>
                            <a href="javascript:;">客户服务</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">腾讯采购</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">国际招聘</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">媒体及投资者</a>
                        </dd>
                    </dl>
                    <dl class="legal">
                        <h3 class="h_title">法律信息</h3>
                        <dd>
                            <a href="javascript:;">服务协议</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">隐私政策</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">知识产权</a>
                        </dd>
                    </dl>
                </div>
                <div class="logo_tencent">
                    <img src="images/index/tencent_logo.png" alt="">
                </div>
                <div class="footer_area">
                    <ul>
                        <li><a href="javascript:;">法律声明</a></li>
                        <li><a href="javascript:;">阳光准则</a></li>
                        <li><a href="javascript:;">网站地图</a></li>
                        <li><a href="javascript:;">粤网文【2017】6138-1456号</a></li>
                        <li><a href="javascript:;">粤B2-20090059</a></li>
                        <li><a href="javascript:;">粤公网安备 44030502008569号</a></li>
                    </ul>
                    <p>Copyright © 1998 - 2022 Tencent. All Rights Reserved. 腾讯公司 版权所有</p>
                </div>
                <a href="javascript:;" class="totop">
                </a>
            </div>
        </div>
    </footer>
    <!-- 页脚部分结束 -->


    <script>
        var nav = document.querySelector('.h-nav');
        var totop = document.querySelector('.totop');

        //下拉白板模块
        var whiteboard = document.querySelector('.whiteboard');
        var shortcut = document.querySelector('.shortcut');
        shortcut.addEventListener('mouseenter', function () {
            whiteboard.style.display = 'block';
        })
        shortcut.addEventListener('mouseleave', function () {
            whiteboard.style.display = 'none';
        })

        //鼠标滚轮模块
        var scrollFunc = function (e) {
            //兼容
            e = e || window.event;
            var distance = document.documentElement.scrollTop;
            //使用window.pageYOffset页面被卷去的头部
            // console.log(window.pageYOffset);
            if (distance < 100) {
                totop.style.bottom = -200 + 'px';
                //到达顶部图标隐藏
                nav.className = 'h-nav';
                // nav.style.position = 'fixed';
                nav.style.top = 0 + 'px';
            }
            else {
                totop.style.bottom = 40 + 'px';
                if (e.wheelDelta < 0) { //当滑轮向下滚动时
                    // nav.style.position = 'fixed';
                    nav.style.top = -72 + 'px';
                }
                if (e.wheelDelta > 0) { //当滑轮向上滚动时
                    nav.style.position = 'fixed';
                    nav.style.top = 0 + 'px';
                    nav.className = 'h-nav g-nav';

                }
            }

            totop.addEventListener('click', function () {
                updown(document.documentElement, 0);
                nav.className = 'h-nav';
                nav.style.top = 0 + 'px';
            })
        }
        // document.onmousewheel = scrollFunc;
        document.addEventListener('mousewheel', scrollFunc)

        //视频模块
        var video = document.querySelector('.secondline_four');
        // var video_img = video.querySelector('img');
        // var video_h3 = video.querySelector('h3');
        // var video_a = video.querySelectorAll('a');
        var video_display = video.querySelector('video');
        video.addEventListener('click', function () {
            // for (var i = 0; i < video_a.length; i++) {
            //     video_a[i].style.display = 'none';
            // }
            // video_h3.style.display = 'none';
            // video_img.style.display = 'none';
            video_display.style.display = 'block';
        })

        //第三模块触摸
        var hotword_title = document.querySelector('.hotword_title');
        for (var i = 0; i < hotword_title.children.length; i++) {
            hotword_title.children[i].addEventListener('mouseover', function () {
                for (var i = 0; i < hotword_title.children.length; i++) {
                    hotword_title.children[i].className = '';
                }
                this.className = 'touch';
            })
        }

        // //第二轮播图标签点击
        var dots = document.querySelector('.dots');
        console.log(dots.children.length);
        for (var i = 0; i < dots.children.length; i++) {
            dots.children[i].addEventListener('click', function () {
                for (var i = 0; i < dots.children.length; i++) {
                    dots.children[i].className = '';
                }
                this.className = 'cur_dots';
            })
        }
    </script>


</body>

</html>